<template>
<div>
      <common-head title="商品列表"></common-head>
  <div class="warp">
    <div class="lists">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
      @click="switchList(index)"
      v-for="(cate, index) in cates"
            :key="cate.id"
            :title="cate.name"
    />
    </van-sidebar>
    </div>
    <div v-if="isShow">
      <div class="itemImg" v-show="!items.length">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F02%2F19%2F03%2F59af37f562372_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630489112&t=5e5d92f4b84fb4142123852b130b84d0" alt="">
      </div>
    </div>
    <div class="listItem">
      <van-card
      v-for="item in items"
      :key="item.id"
      @click="$router.push({
        path: '/detail',
        query: {
          id: item.id
        }
      })"
        :price="item.minPrice"
        :desc="item.characteristic"
        :title="item.name"
        :thumb="item.pic"
      >
      <template #footer>
        <van-icon size="20" color="red" name="shopping-cart" />
      </template>
    </van-card>
    </div>
    <common-tab></common-tab>
  </div>
</div>
</template>

<script>
import CommonTab from '../../components/CommonTab.vue'
import { fetchCates, fetchItems } from 'api'
import CommonHead from '../../components/CommonHead.vue'
export default {
  name: 'cate',
  data () {
    return {
      cates: [],
      items: [],
      activeKey: 0,
      isShow: false
    }
  },
  created () {
    this.fetchCates()
  },
  methods: {
    //
    switchList (index) {
      this.activeKey = index
      this.fetchItems()
    },
    fetchItems () {
      fetchItems({
        categoryId: this.cates[this.activeKey].id
      }).then(res => {
        console.log(res)
        if (res.data.code === 700) {
          this.items = []
          this.isShow = true
        }
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
      })
    },
    fetchCates () {
      fetchCates().then(res => {
        // console.log(res)
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
        this.fetchItems()
      })
    }
  },
  components: { CommonTab, CommonHead }
}
</script>

<style lang="scss" scoped>
.warp{
  display: flex;
  position: fixed;
  left:0;
  right:0;
  top:0;
  bottom: 50px;
  padding-top: 46px;
  .listItem{
    overflow-y: auto;
  }
}
.itemImg>img{
  width: 100%;
}
</style>
